<template>
  <div class="order_list">
    <van-sticky>
      <div class="custom-nav">
        <div class="nav-left" @click="onClickLeft">
          <van-icon name="arrow-left" size="19" color="#000" />
        </div>
        <div class="nav-title" style="width: 235px;height: 30px;">
          <van-field v-model="keyword" label="" left-icon="search" input-align="left" placeholder="请输入关键字"
            style="background-color: #EBEBEB;border-radius: 100px;height: 34px;line-height: 15px;">
            <!-- <template #action>
              <div @click="onSearch">搜索</div>
            </template> -->
          </van-field>
        </div>
        <div class="nav-right">
          <!-- <van-icon name="ellipsis" size="22" color="#000" /> -->
          <div @click="onSearch" style="color: #389138;font-size: 16px;">搜索</div>
        </div>
      </div>
    </van-sticky>
    <!-- <van-nav-bar title="" left-text="" right-text="按钮" left-arrow @click-left="onClickLeft"
      style="background-color: #F5F5F5;position: fixed;width: 100%;height: 68px;" class="van-nav-bar-class">
      <template #left>
        <van-icon name="arrow-left" size="19" color="#000" />
      </template>
<template #title>
        <div style="width: 235px;height: 34px;">
          <van-field v-model="keyword" label="" left-icon="search" input-align="left" placeholder="请输入关键字"
            style="background-color: #EBEBEB;border-radius: 100px;" />
        </div>
      </template>
<template #right>
        <van-icon name="ellipsis" size="22" color="#000" />
      </template>
</van-nav-bar> -->
    <van-tabs class="menu-tabs" v-model="activeIndex" :swipe-threshold="5" sticky offset-top="62" type="line"
      @click="handleTabClick" style="background-color: #F5F5F5;">
      <van-tab v-for="(tabTitle, index) in tabTitles" :key="index" :title="tabTitle">
        <!-- <div style="height: 10px;"></div> -->
        <div v-for="(item, index2) in orderList" :key="index2">
          <div class="user-order3">
            <div style="display: flex;padding-top: 22px">
              <div
                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #333333;margin-left: 23px;">
                订单编号:{{ item.order_sn }}
              </div>
              <div v-if="item.status == 0"
                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #CB0000;position: absolute;float: right;right: 20px;">
                待支付
              </div>
              <div v-else-if="item.status == 1"
                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #389138;position: absolute;float: right;right: 20px;">
                已支付
              </div>
              <div v-else-if="item.status == 2"
                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #CB0000;position: absolute;float: right;right: 20px;">
                已取消
              </div>
              <div v-else-if="item.status == 4"
                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #389138;position: absolute;float: right;right: 20px;">
                已发货
              </div>
              <div v-else-if="item.status == 3"
                style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #389138;position: absolute;float: right;right: 20px;">
                待发货
              </div>
            </div>

            <div style="display: flex;padding-top: 20px;">
              <img :src="item.goods.image" alt="" srcset=""
                style="width: 90px;height: 90px;border-radius: 8px;margin-left: 22px;">
              <div
                style="margin-left: 12px;font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #151515;height: 40px;line-height: 20px;width: 220px;">
                {{ item.goods.name }}</div>

              <div style="padding-top: 70px;display: flex">
                <div
                  style="float: right;right: 20px;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 12px;color: #666666;position: absolute">
                  x1
                </div>
                <div
                  style="font-family: MiSans, MiSans;font-weight: 600;font-size: 13px;color: #2E512E;position: absolute;float: left;left: 130px;">
                  ￥{{ item.goods_money }}
                </div>

              </div>
            </div>
            <div class="user-order4" v-if="item.status == 3">
              <div style="display: flex;padding-top: 12px;">
                <div
                  style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;margin-left: 10px;width: 100px;">
                  收货人</div>
                <div
                  style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #181818;position: absolute;float: right;right: 40px; ">
                  {{ item.address.name }}</div>
              </div>
              <div style="display: flex;padding-top: 20px;">
                <div
                  style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;margin-left: 10px;width: 100px;">
                  联系电话</div>
                <div
                  style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;;color: #181818 ;position: absolute;float: right;right: 40px;">
                  {{ item.address.mobile }}</div>
              </div>

              <div style="display: flex;padding-top: 20px;">
                <div
                  style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;margin-left: 10px;">
                  收货地址</div>
                <div
                  style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #181818;width: 200px;position: absolute;float: right;right: 40px;text-align: right;">
                  {{ item.address.province }}{{ item.address.city }}{{ item.address.country }}{{ item.address.detail }}
                </div>
              </div>
            </div>



            <div v-if="item.status == 1" style="height: 30px;"></div>

            <div class="user-order5" v-else-if="item.status == 2">
              <div style="display: flex;padding-top: 12px;">
                <div
                  style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;margin-left: 10px;width: 100px;">
                  账户余额</div>
                <div
                  style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #389138;position: absolute;float: right;right: 50px; ">
                  -￥{{ item.price }}</div>
              </div>
              <div style="display: flex;padding-top: 20px;">
                <div
                  style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;margin-left: 10px;width: 100px;">
                  微信支付</div>
                <div
                  style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;;color: #181818 ;position: absolute;float: right;right: 50px;">
                  ￥{{ item.money }}</div>
              </div>

            </div>
            <div style="margin-top: 10px;float: right;right: 20px;display: flex;position: absolute"
              v-if="item.status == 0">
              <van-button
                style="width: 93px;height: 30px;border-radius: 100px;border: 1px solid #CCCCCC;text-align: center;font-size: 14px;margin-right: 10px;"
                @click="orderDelete(item.id)">删除订单</van-button>
              <van-button
                style="width: 93px;height: 30px;border-radius: 100px;text-align: center;font-size: 14px;background-color: #389138;color: #fff;"
                @click="toOrderDetail(item)">立即支付</van-button>
            </div>
            <div v-if="item.status == 0" style="height: 60px;"></div>
            <div v-else-if="item.status == 2 || item.status == 4 ||  item.status == 3" style="height: 30px;"></div>
          </div>
        </div>
        <div v-if="orderList.length == 0">
          <van-list :finished="true" :immediate-check="false">
            <div class="main2" style="text-align: center;height: 200px;">
              <img src="@/assets/homr/Group 9420.png" alt="logo" style="width: 180px;height: 120px;margin-top: 40px;">
              <div>暂无内容</div>
            </div>
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>

import {
  orderList,
  orderDelete,
  orderConfirm,
  orderCancel,
  orderRefund,
  getorderList,
  getAddress
} from '@/api/user'
import { Dialog } from 'vant';
let previousRouterName = "";
let selectAddress = "";
export default {
  name: 'OrderList',
  props: {
    active: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      value: "",
      keyword: "",
      addressInfo: {},
      activeIndex: Number(this.active),//空=全部  0=待支付,1=已支付,2=已取消,3=待发货,4=已发货,5=已完成',
      tabTitles: ['全部', '待支付', '已支付', '待发货', '待收货', '已完成'],
      orderList: [],
      refreshing: false,
      page: 0,
      limit: 10,
      loading: true,
      orderListEmptyShow: false,
      finished: false,
      status: Number(this.active)
    }
  },
  created() {
   

  },


  mounted() {
    this.init()

  },

  methods: {

    isEmptyObject(obj) {
      return Object.keys(obj).length === 0;
    },
    selAddress() {
      this.$router.push({
        path: "/address"
      })
    },
   
    orderDelete(id) {
      let obj = {
        ids: id,

      }
      Dialog.confirm({
        title: '',
        message: '确认是否要删除？',
      })
        .then(() => {
          // on confirm
          orderDelete(obj).then(res => {

            this.init()
          }).catch(e => { })
        })
        .catch(() => {
          // on cancel
        });
    },
    onClickLeft() {
      this.$router.back()
    },
    init() {
      this.page = 0
      this.orderList = []
      this.getOrderList(true)
    },
    // 下拉刷新
    onRefresh() {
      this.refreshing = true
      this.page = 0
      this.orderList = []
      this.getOrderList(true)
    },
    onSearch() {
      this.getOrderList()
    },
    getOrderList(init) {
      this.loading = true
      var status = ""
      if (this.status == 0) {
        status = ""
      } else if (this.status == 1) {
        status = 0
      } else if (this.status == 2) {
        status = 1
      } else if (this.status == 3) {
        status = 3
      } else if (this.status == 4) {
        status = 4
      } else if (this.status == 5) {
        status = 5
      }
      this.orderList = []

      let obj = {
        status: status,
        page: 1,
        pageSize: 500,
        keyword: this.keyword
      }
      getorderList(obj).then((res) => {
        this.orderList = res.data.list
        this.loading = false
      })
    },
    delOrder(id) {
      this.$dialog
        .confirm({ message: '确定要删除该订单吗?' })
        .then(() => {
          orderDelete(id).then(() => {
            this.init()
            this.$toast('已删除订单')
          })
        })
        .catch(() => { })
    },
    cancelOrder(id) {
      this.$dialog
        .confirm({ message: '确定要取消该订单吗?' })
        .then(() => {
          orderCancel(id).then(() => {
            this.init()
            this.$toast('已取消该订单')
          })
        })
        .catch(() => { })
    },
    refundOrder(id) {
      this.$dialog
        .confirm({ message: '确定要申请退款吗?' })
        .then(() => {
          orderRefund(id).then(() => {
            this.init()
            this.$toast('已申请订单退款')
          })
        })
        .catch(() => { })
    },
    confirmOrder(id) {
      this.$dialog
        .confirm({
          message: '请确认收到货物, 确认收货后无法撤销!'
        })
        .then(() => {
          orderConfirm(id).then(() => {
            this.init()
            this.$toast('已确认收货')
          })
        })
        .catch(() => { })
    },
    commentGoods(orderGoodsId, goodsId) {
      this.$router.push({
        path: `/goodsComment/${orderGoodsId}/${goodsId}`
      })
    },
    toPay(orderSn, actualPrice) {
      this.$router.push({ name: 'OrderPay', params: { orderSn, actualPrice } })
    },
    handleTabClick() {
      this.status = this.activeIndex


      this.page = 0
      this.orderList = []
      this.getOrderList()
    },
    toOrderDetail(val) {
      this.$router.replace({
        path: `/order/detail`,
        query: {
          orderInfo: val
        }
      })
    }
  }
}
</script>
<style>
.custom-nav {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #F5F5F5;
  height: 100px;
}

.nav-left,
.nav-right {
  padding: 0 15px;
  cursor: pointer;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
}

.iconfont {
  font-size: 20px;
}

.menu-tabs .van-tabs__nav {
  background-color: #F5F5F5;

}
</style>
<style lang="scss">
.user-order3 {
  width: 702px;
  // height: 700px;
  margin: 0 auto;
  box-shadow: var(--user-order-shadow);
  border-radius: 24px;
  margin-top: 42px;
  background-color: #fff;
}

.user-order4 {
  width: 620px;
  height: 250px;
  margin: 0 auto;
  box-shadow: var(--user-order-shadow);
  border-radius: 24px;
  margin-top: 42px;
  background-color: #F5F5F5;

}


.user-order5 {
  width: 602px;
  height: 150px;
  margin: 0 auto;
  box-shadow: var(--user-order-shadow);
  border-radius: 24px;
  margin-top: 42px;
  background-color: #F5F5F5;
}

.menu-tabs .van-tabs__line {
  background-color: #389138;
}

.van-nav-bar-class .van-nav-bar__content {

  z-index: 99999;
}

.van-nav-bar-class .van-nav-bar__title .van-ellipsis {
  height: 47px !important;
}

.order-list {
  .van-card {
    background: #fff;
    margin-top: 0;
  }

  .van-tabs__wrap {
    background: #fff;
    padding: 4px 0;
  }
}
</style>
<style lang="scss" scoped>
.order_list {
  background: #f5f5f5;

  .order-item {
    background-color: #fff;
    margin: 15px 5px;
    border-radius: 15px;

    .order-title {
      display: flex;
      justify-content: space-between;
      padding: 25px 20px;

      .order-sn {
        text-align: left;
      }

      .order-staus {
        text-align: right;
      }
    }

    .van-card {
      background-color: #fff;
    }

    .total {
      text-align: right;
      padding: 10px;
    }

    .footer_btn {
      text-align: right;
      padding: 10px;

      .van-button {
        margin-left: 10px;
        min-width: 70px;
      }
    }
  }
}
</style>
